1 files changed, 136 insertions, 0 deletions
diff --git a/front-end/src/views/Account/[comp].vue b/front-end/src/views/Account/[comp].vue
new file mode 100644
index 0000000..75fd086
--- /dev/null
+++ b/front-end/src/views/Account/[comp].vue
@@ -0,0 +1,136 @@
+<template>
+  <div id="account-template" class="app-component-entry">
+    <TabGroup :selectedIndex="tabId" @change="onTabChange" as="div" class="container h-full m-auto mt-0 mb-10 duration-150 ease-linear">
+
+      <div class="flex w-full py-2 xl:w-auto lg:pt-4 xl:fixed">
+        
+        <TabList as="div" class="flex flex-row mx-auto mb-1 xl:mx-0 xl:mb-0">
+          
+          <Tab v-slot="{ selected }" >
+            <span class="page-link" :class="{ 'active': selected }">
+             Profile
+            </span>
+          </tab>
+
+          <Tab v-slot="{ selected }" >
+            <span class="page-link" :class="{ 'active': selected }">
+             OAuth
+            </span>
+          </tab>
+
+          <Tab v-slot="{ selected }" >
+            <span class="page-link" :class="{ 'active': selected }">
+             Settings
+            </span>
+          </tab>
+
+        </TabList>
+      </div>
+
+      <TabPanels as="div" class="xl:my-16 md:mb-4">
+        
+        <TabPanel :unmount="false">
+          <Profile />
+        </TabPanel>
+        
+        <TabPanel :unmount="false">
+          <OauthApps />
+        </TabPanel>
+        
+        <TabPanel :unmount="false">
+          <Settings />
+        </TabPanel>
+
+      </TabPanels>
+
+    </TabGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { usePageGuard, useTitle } from '@vnuge/vnlib.browser'
+import { useRouteParams } from '@vueuse/router'
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
+import Settings from './components/settings/Settings.vue'
+import Profile from './components/profile/Profile.vue'
+import OauthApps from './components/oauth/Oauth.vue'
+
+usePageGuard()
+useTitle('Account')
+
+enum ComponentType{
+  Profile = 'profile',
+  Oauth = 'oauth',
+  Settings = 'settings'
+}
+
+const comp = useRouteParams<ComponentType>('comp')
+
+const tabId = computed<number>(() =>{
+   switch (comp.value) {
+    case ComponentType.Oauth:
+      return 1
+    case ComponentType.Settings:
+      return 2
+    case ComponentType.Profile:
+    default:
+      return 0
+  }
+})
+
+const onTabChange = (tabid : number) =>{
+  switch (tabid) {
+    case 1:
+      comp.value = ComponentType.Oauth
+      break
+    case 2:
+      comp.value = ComponentType.Settings
+      break
+    case 0:
+    default:
+      comp.value = ComponentType.Profile
+      break
+  }
+}
+
+</script>
+
+<style lang="scss">
+#account-template{
+  p{
+    @apply text-gray-700 dark:text-gray-400;
+  }
+
+  .page-link{
+    font-size: 1.1rem;
+    @apply border-b-2 border-transparent cursor-pointer mx-2 px-1;
+  }
+
+  .page-link.active{
+    @apply border-primary-500;
+  }
+
+  .acnt-content-container{
+    @apply m-auto max-w-3xl;
+  }
+
+  .panel-container{
+
+  }
+
+  .panel-container .panel-header{
+    @apply flex flex-row px-2;
+  }
+
+  .panel-container .panel-content{
+    @apply bg-white dark:bg-dark-800 border-transparent dark:border-dark-500;
+    @apply m-auto max-w-3xl border sm:rounded-md shadow-md sm:p-4 p-3 sm:my-3 my-2;
+  }
+
+  .panel-container .panel-header .panel-title{
+    @apply my-auto;
+  }
+}
+
+</style>